import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import '@fortawesome/fontawesome-free/css/all.css'

const app = createApp(App)

// 注册LoadingState组件为全局组件
app.component('LoadingState', {
  name: 'LoadingState',
  props: {
    pageType: {
      type: String,
      default: 'chat'
    }
  },
  computed: {
    loadingText() {
      switch (this.pageType) {
        case 'weather': return '正在查询天气...'
        case 'knowledge': return '正在查找知识...'
        case 'task': return '正在处理任务...'
        case 'emotion': return '正在思考回应...'
        case 'health': return '正在分析健康问题...'
        case 'culture': return '正在查找文化内容...'
        case 'model': return '正在切换模型...'
        default: return '正在思考...'
      }
    },
    gradientClass() {
      let start, end
      
      switch (this.pageType) {
        case 'weather':
          start = 'from-blue-500'
          end = 'to-blue-700'
          break
        case 'knowledge':
          start = 'from-purple-500'
          end = 'to-purple-700'
          break
        case 'task':
          start = 'from-green-500'
          end = 'to-green-700'
          break
        case 'emotion':
          start = 'from-pink-500'
          end = 'to-pink-700'
          break
        case 'health':
          start = 'from-amber-500'
          end = 'to-amber-700'
          break
        case 'culture':
          start = 'from-indigo-500'
          end = 'to-indigo-700'
          break
        case 'model':
          start = 'from-blue-500'
          end = 'to-blue-700'
          break
        default:
          start = 'from-blue-500'
          end = 'to-blue-700'
      }
      
      return ['bg-gradient-to-r', start, end]
    }
  },
  template: `
    <div class="message assistant mb-4 scale-in">
      <div class="flex items-start gap-3">
        <div
          class="h-10 w-10 rounded-full flex items-center justify-center shrink-0"
          :class="[gradientClass]"
        >
          <i class="fa fa-spinner fa-spin text-white text-sm"></i>
        </div>
        <div class="message-content message-bubble assistant-message">
          <div class="flex items-center gap-1 mb-1">
            <span class="text-xs font-semibold text-gray-500">{{ loadingText }}</span>
          </div>
          <div class="typing-indicator">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </div>
  `
})

app.mount('#app')
